/**
 * This script has methods to edit the theme
 * 
 */
$(document).ready(function () {
    // Display and hide each config pannel
    $('#controls_tab li').click(function () {
        if ($(this).hasClass('active'))
        {
            $(this).removeClass('active');
            $('#controls_container').hide('show');
            $('#controls_container div.switchboard').removeClass('active');
        }
        else
        {
            var currentTab = $(this);
            var id = $(this).attr('id');
			
			currentTab.parent().find('li.active').removeClass('active');
			
            $('#block-' + id).addClass('active');
            $('#controls_container').show('slow', function () {currentTab.addClass('active');});
        }
    });
    
    // Display and hide each config section
    $('#remote_controls #controls_container .switchboard .config_tool h3').click(function (e) {
        if (!$(this).hasClass('active'))
        {/*
            $(this).parent().css('background-color', '#dfdfdf');
            $(this).parent().parent().find('h3.active').each(function () {
                $(this).parent().css('background-color', 'none');
            });*/
            $(this).parent().parent().find('h3.active').each(function () {
                $(this).removeClass('active');
                $(this).next('div').find('div.va-content').slideUp('slow');
            });
        }
        $(this).toggleClass('active');
        $(this).next('div').find('div.va-content').slideToggle('slow');
    });
    
    // Display and hide each config section
    $('#remote_controls #controls_container .switchboard .config_tool h4').click(function (e) {
        if (!$(this).hasClass('active'))
        {
            $(this).parent().parent().find('h4.active').each(function () {
                $(this).removeClass('active');
                $(this).next('div.sub-block-content').slideUp('slow');
            });
        }
        $(this).toggleClass('active');
        $(this).next('div.sub-block-content').slideToggle('slow');
    });
    
    // Apply the same action on 
	$('.design-option').click (function (e) {
        var className = $(this).attr('class');
        var elementID = $(this).attr('id');
        className = className.replace('design-option', '');
        className = className.replace('active', '');
        className = className.trim();
        
        $(this).parent().find('div.design-option.active').removeClass('active');
        $(this).addClass('active');
		
        elementID = elementID.replace('view-', '');
        $('#'+elementID).trigger('click');
	});
});